<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIProxy 管理后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { padding: 2rem; }
        .container { max-width: 960px; }
        .user-table th, .user-table td { vertical-align: middle; }
        .model-list { max-height: 300px; overflow-y: auto; background-color: #f8f9fa; padding: 1rem; border-radius: .25rem; }
    </style>
</head>
<body>

<div id="app" class="container">
    <h1 class="mb-4">AIProxy 管理后台</h1>

    <!-- 用户列表 -->
    <div class="card mb-4">
        <div class="card-header">
            用户列表
        </div>
        <div class="card-body">
            <table class="table user-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>API Key</th>
                        <th>Token 余额</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users" :key="user.id">
                        <td>{{ user.id }}</td>
                        <td>{{ user.username }}</td>
                        <td><code>{{ user.api_key }}</code></td>
                        <td>{{ user.token_balance }}</td>
                        <td>
                            <button class="btn btn-sm btn-primary" @click="startEdit(user)">修改余额</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 创建新用户 -->
    <div class="card mb-4">
        <div class="card-header">
            创建新用户
        </div>
        <div class="card-body">
            <form @submit.prevent="createUser">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="new-username" class="form-label">用户名</label>
                        <input type="text" id="new-username" class="form-control" v-model="newUser.username" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="new-balance" class="form-label">初始Token余额</label>
                        <input type="number" id="new-balance" class="form-control" v-model.number="newUser.token_balance" required>
                    </div>
                </div>
                <button type="submit" class="btn btn-success">创建用户</button>
            </form>
        </div>
    </div>

    <!-- 可用模型列表 -->
    <div class="card mb-4">
        <div class="card-header">
            可用 Gemini 模型
            <button class="btn btn-sm btn-info float-end" @click="fetchModels">刷新模型列表</button>
        </div>
        <div class="card-body">
            <div v-if="models && models.length > 0" class="model-list">
                <ul class="list-unstyled">
                    <li v-for="model in models" :key="model.name">
                        <strong>{{ model.displayName || model.name }}</strong> ({{ model.name }})
                        <small v-if="model.description"> - {{ model.description }}</small>
                    </li>
                </ul>
            </div>
            <div v-else-if="modelsLoading" class="text-center">
                加载中...
            </div>
            <div v-else class="text-muted">
                点击“刷新模型列表”按钮查看当前API Key可用的模型。
            </div>
        </div>
    </div>

    <!-- 修改余额 Modal -->
    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改 {{ editingUser.username }} 的余额</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="updateBalance">
                        <div class="mb-3">
                            <label for="edit-balance" class="form-label">新 Token 余额</label>
                            <input type="number" id="edit-balance" class="form-control" v-model.number="editingUser.token_balance" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">确认修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/app.js"></script>

</body>
</html>
